<template>
    <div class="comment">
        <p>全部评论<span style="font-size: 10px;">{{ comment.total }}</span></p>
        <div class="publish">
            <textarea v-model="content" placeholder="说点什么吧"></textarea>
            <div>
                <span>{{ 35 - content.length }}</span>
                <span @click="postAComment(vid)">发布</span>
            </div>
        </div>
    </div>
    <div class="Content"
        v-for="(it, indexs) in [{ data: comment.hotComments, p: '精彩评论' }, { data: comment.comments, p: '最新评论' }]"
        :key="indexs">
        <p>{{ it.p }}<span v-if="it.p === '最新评论'" style="font-size: 10px;">{{ comment.total }}</span></p>
        <div class="items">
            <div class="item" v-for="(item, index) in it.data" :key="index">
                <img :src="item.user?.avatarUrl">
                <div class="author">
                    <div class="nickname">
                        <span>{{ item?.user?.nickname }}</span>
                    </div>
                    <div class="content">{{ item?.content }}</div>
                    <div class="timeStr">
                        <div>{{ item?.timeStr }}</div>
                        <div class="timeStr-tool">
                            <div class="tool-1">
                                <span
                                    :style="likeList.findIndex((id: any) => id === item.commentId) != -1 ? 'color:red' : ''">{{
                                        likeList.findIndex((id:
                                            any) => id === item.commentId) != -1 ? item?.likedCount + 1 : item?.likedCount
                                    }}</span>
                                <svg @click="likes(2, item.commentId)"
                                    v-if="likeList.findIndex((id: any) => id === item.commentId) != -1" t="1705978307439"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    p-id="1272" width="18" height="18">
                                    <path
                                        d="M948.4 407.2c-29.2-35.5-76.9-35.5-92.6-35.5H730c10.2-55.2 18.9-119.4 0.2-187.1-12.8-46.6-36.3-79.7-72-101.1-18.7-11.2-38.1-16.9-57.8-16.9-51.8 0-90.6 38.4-96.4 95.7-2.2 21.4-4.2 41.7-9.3 59.1-19 63.9-65.4 112.7-108.3 151.8-16 14.4-33.1 40.2-33.3 69.2-0.6 77.6-0.7 155.5-0.7 235.1l-0.1 141.4c-0.2 47.3 25 85.4 67 101.7 22.2 9 45.7 14 70.1 14.7 38.8 0.5 77.8 0.5 114.3 0.5h56.9c37.2 0 74.4 0 111.8 0.4h1.2c43.5 0 77.7-21.7 93.9-59.5l4.8-11.1c11.3-26 22.9-52.9 30.1-82.8 22-90.9 44.9-188.2 63.4-283.8 7.4-37.9 1.6-68.8-17.4-91.8zM216.1 374.5h-11.9c-56.2 0-101.9 45.7-101.9 101.9v348.4c0 56.2 45.7 101.9 101.9 101.9h11.9c56.2 0 101.9-45.7 101.9-101.9V476.4c0.1-56.2-45.7-101.9-101.9-101.9z"
                                        fill="#d81e06" p-id="1273"></path>
                                </svg>
                                <svg @click="likes(1, item.commentId)" v-else t="1705978820644" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1474"
                                    width="20" height="20">
                                    <path
                                        d="M725.6 854.8h-1.3c-33.7-0.3-68.1-0.4-97.6-0.4H577c-31.8 0-65.8 0-100.1-0.4h-0.4c-20.9-0.6-41.2-4.9-60.6-12.8-36.6-14.3-58.5-47.4-58.3-88.4l0.2-123.7c0-69.5 0.1-137.6 0.6-205.8 0.2-25.1 15-47.4 28.9-60 37.6-34.4 78.3-77.1 95-133.2 4.5-15.3 6.3-33 8.2-51.8 2.4-23.8 11.4-44.3 26.2-59.3 15-15.3 35.4-23.8 57.4-23.8 17 0 33.9 5 50.2 14.6 31 18.6 51.5 47.4 62.6 88 16.4 59.4 8.6 115.8-0.3 164.2h111c13.6 0 55.1 0 80.5 30.8 16.4 19.9 21.4 46.8 15 79.8-16.3 83.7-36.3 168.8-55.5 248.4-6.3 26.2-16.5 49.7-26.4 72.5l-0.1 0.2-4.1 9.4c-13.9 32.9-43.6 51.7-81.4 51.7z m-0.9-40h1c21.9 0 37-9.2 44.7-27.4l4.2-9.7c9.2-21.2 18.6-43.1 24.2-66 19.1-79.1 39-163.8 55.1-246.6 4.1-21 1.9-36.3-6.6-46.7-12-14.6-34-16.2-49.6-16.2H683.9c-11.2 0-21.8-5-28.9-13.5-7.2-8.6-10.2-20.1-8.2-31.2l0.1-0.2c8.3-44.6 15.9-96.4 1.5-148.6-8.2-30.2-22.9-51.3-44.6-64.3-9.9-5.9-19.9-9-29.6-9-24.1 0-40.9 18-43.8 47-2 19.8-4.1 40.3-9.7 59.2C501.2 307.1 456 354.8 414.3 393l-0.1 0.1c-7.5 6.8-15.6 19.3-15.7 30.6-0.6 68-0.6 136-0.6 205.4l-0.2 123.8c-0.1 24.6 11.6 42.8 33 51l0.2 0.1c14.9 6.1 30.6 9.4 46.6 9.9 33.9 0.4 67.7 0.4 99.4 0.4h49.8c29.7 0.1 64.1 0.2 98 0.5z m-486.8 31.7h-10.4c-48.8 0-88.5-39.7-88.5-88.5V453.2c0-48.8 39.7-88.5 88.5-88.5h10.4c48.8 0 88.5 39.7 88.5 88.5v304.9c0 48.7-39.7 88.4-88.5 88.4z m-10.4-441.7c-26.7 0-48.5 21.8-48.5 48.5v304.9c0 26.7 21.8 48.5 48.5 48.5h10.4c26.7 0 48.5-21.8 48.5-48.5v-305c0-26.7-21.8-48.5-48.5-48.5h-10.4z m0 0"
                                        p-id="1475" fill="#e6e6e6"></path>
                                </svg>
                            </div>
                            <div class="tool-2">
                                <svg t="1705978966942" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3985" width="20" height="20">
                                    <path
                                        d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
                                        fill="#e6e6e6" p-id="3986"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue"
import { resourceLike, sendComment } from "@/api/user"
import { getCommentLike, setCommentLike } from "@/utils/auth"
import { getUser } from "@/utils/auth"
import { ElMessage } from "element-plus";

const likeList = ref<any>(getCommentLike())
const content = ref<string>("")

const props = defineProps({
    comment: {
        type: Object,
        default: {}
    },
    vid: {
        type: String,
        default: ""
    },
    type: {
        type: Number,
        default: 1
    }
})
const emits = defineEmits(["postAComments"])

function postAComment(id: string) {
    if (!getUser()) return ElMessage({
        message: '请去登录后在评论',
    })
    sendComment({ t: 1, type: props.type, id, content: content.value, commentId: getUser().userId }).then(res => {
        emits("postAComments", JSON.stringify(res.data.comment))
        content.value = ""
    })
}

//点赞
function likes(t: number, id: string) {
    if (!getUser()) return ElMessage({
        message: '请去登录后在点赞',
    })
    // 调用resourceLike函数，传入参数type=1，t，id
    resourceLike({ type: 1, t, id }).then(res => {
        // 如果返回的code等于200
        if (res.data.code === 200) {
            // 调用localStorages函数，传入参数t，id
            localStorages(t, id)
        }
    })
}

//函数localStorages，参数t为数字，id为字符串
function localStorages(t: number, id: string) {
    //如果t等于1
    if (t === 1) {
        //将id添加到likeList中
        likeList.value.push(id)
    } else {
        //在likeList中查找id，并返回索引
        const index = likeList.value.findIndex((ids: any) => ids === id)
        //从likeList中删除索引对应的元素
        likeList.value.splice(index, 1)
    }
    //调用setCommentLike函数，传入likeList
    setCommentLike(likeList.value)
}

</script>

<style lang="scss" scoped>
.comment {
    width: 90%;
    margin: auto;
    margin-top: 2vh;

    p {
        font-size: 16px;
        margin-bottom: 10px;
        color: #fff;
        display: flex;
        align-items: start;
    }

    .publish {
        width: 100%;
        height: 12vh;
        background: #1A1A21;
        border-radius: 10px;
        padding: 10px;
        color: #ccc;
        border: 1px solid rgba(255, 255, 255, 0.2);

        >div {
            display: flex;
            justify-content: space-between;

            span:nth-child(2):hover {
                cursor: pointer;
                color: #fff;
            }
        }
    }


    textarea {
        resize: none;
        width: 100%;
        outline: none;
        border: 0;
        color: #fff;
        background: #1A1A21;
        font-weight: 600;
    }

    textarea::-webkit-scrollbar {
        display: none;
    }

    span {
        font-size: 14px;
        font-weight: 800;
    }

}

.Content {
    width: 90%;
    margin: auto;
    margin-top: 6vh;

    p {
        font-size: 16px;
        margin-bottom: 10px;
        font-weight: 800;
        color: #fff;
        display: flex;
        align-items: start;
    }

    .items {
        width: 100%;
        color: #fff;
        margin-top: 4vh;
    }

    .item {
        display: flex;
        align-items: start;
        min-height: 14vh;
        margin-bottom: 2vh;
        border-bottom: 0.2px solid rgba(255, 255, 255, 0.1);

        img {
            width: 4vw;
            border-radius: 50px;
            margin: 0 10px;
        }

        .author {
            width: 90%;

            .nickname {
                color: #5570AA;


                span:hover {
                    color: #87acfc;
                    cursor: pointer;
                }
            }

            .content {
                color: rgba(255, 255, 255, 0.7);
            }

            .timeStr {
                color: #ccc;
                font-size: 10px;
                margin-top: 2vh;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 2vh;

            }
        }
    }
}

.timeStr-tool {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tool-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 1vw;

        span {
            margin-right: 2px;
        }
    }

    svg:hover {
        cursor: pointer;
    }


}
</style>